<template>
    <span v-if="dot" :class="classes" ref="badge">
        <slot></slot>
        <sup :class="dotClasses" :style="dotStyle" v-show="badge"></sup>
    </span>
    <span v-else :class="classes" ref="badge">
        <slot></slot>
        <sup v-if="value" :class="countClasses" :style="countStyle" v-show="badge">{{ finalValue }}</sup>
    </span>
</template>
<script>
    import {oneOf} from '../../utils/assist';

    const prefixCls = 'ivu-badge';

    export default {
        name: 'Badge',
        props: {
            value: [Number, String],
            color: {
                type: String,
                default: "error"
            },
            dot: {
                type: Boolean,
                default: false
            },
            overflow: {
                type: [Number, String],
                default: 99
            },
            className: String
        },
        methods: {
            isSelfColor(){
                return !oneOf(this.color, ['primary', 'info', 'success', 'warning', 'error']);
            }
        },
        computed: {
            classes () {
                return `${prefixCls}`;
            },
            dotStyle(){
                if (this.color && this.isSelfColor()) {
                    return {
                        background: this.color
                    }
                }
            },
            countStyle(){
                if (this.color && this.isSelfColor()) {
                    return {
                        background: this.color
                    }
                }
            },
            dotClasses () {
                return [`${prefixCls}-dot`,
                    {
                        [`${this.className}`]: !!this.className,
                        [`${prefixCls}-${this.color}`]: !!this.color && !this.isSelfColor()
                    }
                ];
            },
            countClasses () {
                return [
                    `${prefixCls}-count`,
                    {
                        [`${this.className}`]: !!this.className,
                        [`${prefixCls}-${this.color}`]: !!this.color && !this.isSelfColor(),
                        [`${prefixCls}-count-alone`]: this.alone
                    }
                ];
            },
            finalValue () {
                return parseInt(this.value) >= parseInt(this.overflow) ? `${this.overflow}+` : this.value;
            },
            badge () {
                let status = false;

                if (this.value) {
                    status = !(parseInt(this.value) === 0);
                }

                if (this.dot) {
                    status = true;
                    if (this.value) {
                        if (parseInt(this.value) === 0) {
                            status = false;
                        }
                    }
                }

                return status;
            }
        },
        data () {
            return {
                alone: false
            };
        },
        mounted () {
            const child_length = this.$refs.badge.children.length;
            if (child_length === 1) {
                this.alone = true;
            }
        }
    };
</script>
